let body = document.querySelector('body');
let toggle = document.querySelector('#toggle');
let add_user = document.querySelector('#add-user')
let main = document.querySelector('#main');
let double = document.querySelector('#double');
let show_millionaire = document.querySelector('#show-millionaire');
let h2s = document.querySelectorAll('h2');
let moneySort = document.querySelector('#sort');
let moneySum = document.querySelector('#calculate')
let flag = 1
let num = 10000;
let index = 0;
// console.log(num.toLocaleString()+'.00')
let dataInfo = [{
    name: "安东尼 戴维斯",
    money: 892001
},
{
    name: "凯里 欧文",
    money: 668932
},
{
    name: "史蒂夫 库里",
    money: 698756
},
{
    name: "德里克 罗斯",
    money: 492489
},
{
    name: "保罗 乔治",
    money: 853957
},
{
    name: "勒布朗 詹姆斯",
    money: 968472
},
{
    name: "詹姆斯 哈登",
    money: 718225
},
{
    name: "凯文 杜兰特",
    money: 889147
},
];
toggle.addEventListener('click', function () {
    if (flag == 1) {
        body.classList.add('show_nav')
        flag = 2
    } else {
        body.classList.remove('show_nav');
        flag = 1
    }
})
let money = [];
let money_name = [];

add_user.addEventListener('click', function () {
    let classSum = document.querySelector('.sum');
    if (classSum!=null) {
        classSum.style.display = 'none';
    }
    let h2 = document.createElement('h2');
    let strong = document.createElement('strong');
    let span = document.createElement('span');
    for (let k in dataInfo[index]) {
        strong.innerHTML = dataInfo[index]['name'];
        money_name[index] = dataInfo[index]['name'];
        money[index] = dataInfo[index]['money'];
        span.innerHTML = `$${money[index].toLocaleString() + '.00'}`;
        // console.log(money);
    }
    h2.appendChild(strong);
    h2.appendChild(span);
    main.appendChild(h2);
    index++

})
// let doublemoney = []
double.addEventListener('click', function () {
    let classSum = document.querySelector('.sum');
    if (classSum!=null) {
        classSum.style.display = 'none';
    }
    let spanS = document.querySelectorAll('span');
    for (let k in money) {
        let k1 = k * 1 + 1

        spanS[k1].innerHTML = `$${(money[k] *= 2).toLocaleString() + '.00'}`


    }
})

show_millionaire.addEventListener('click', function () {

    let h2Long = document.querySelectorAll('#main>h2');
    for (let i = 0; i < money.length; i++) {
        if (money[i] <= 1000000) {
            h2Long[i + 1].remove()
            index--;
        }
    }

})

moneySort.addEventListener('click', function () {
    let h2Long = document.querySelectorAll('#main>h2')
    for (let i = 1; i < h2Long.length; i++) {
        h2Long[i].remove()
        // index--;
    }
    for (let i = 0; i < money.length; i++) {
        for (let j = 0; j < money.length - i; j++) {
            if (money[j] < money[j + 1]) {
                let more = money[j];
                money[j] = money[j + 1];
                money[j + 1] = more;
                let more_name = money_name[j];
                money_name[j] = money_name[j + 1];
                money_name[j + 1] = more_name;
            }
        }
    }
    money.forEach(function (item, index) {
        let h2 = document.createElement('h2');
        let strong = document.createElement('strong');
        let span = document.createElement('span');
        strong.innerHTML = money_name[index];
        span.innerHTML = `$${item.toLocaleString() + '.00'}`;
        h2.appendChild(strong);
        h2.appendChild(span);
        main.appendChild(h2);
    })

})
moneySum.addEventListener('click', function () {
    let classSum = document.querySelector('.sum');
    if (classSum!=null) {
        classSum.style.display = 'none';
    }
    console.log(classSum);
    let h2 = document.createElement('h2');
    let sum = 0;
    money.forEach(function (item) {
        sum += item
    })
    h2.innerHTML = `<strong>合计</strong><span>$${sum.toLocaleString() + '.00'}</span>`;
    h2.classList.add('sum')
    main.appendChild(h2);
    sumNone()
})

function sumNone() {
    let h2Long = document.querySelectorAll('#main>h2');
    h2Long.forEach(function () {
        
    })
}